import { useEffect, useRef } from "react";
import { useDrag } from "react-dnd";
import { useMaterialDrop } from "../../hooks/useMaterialDrop"
import { CommonComponenetProps } from "../../interface"

const Modal = ({id, children, title, styles}: CommonComponenetProps) =>{

    const divRef = useRef<HTMLDivElement>(null)

    // drag
    const [_, drag] = useDrag({
        type: "Container",
        item: {
            type: "Container",
            dragType: "move",
            id: id
        }
    })

    // drop
    const {canDrop, drop} = useMaterialDrop(["Button", "Container", "Table", "Form"], id);

    useEffect(() => {
        drag(divRef)
        drop(divRef)
    }, [])

    return (
        <div
            ref={divRef}
            style={styles}
            data-component-id={id}
            className={`min-h-[100px] p-[20px] ${ canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`}
        >
            <h4>{title}</h4>
            <div>
                { children }
            </div>
        </div>
    )
}

export default Modal